<template>
  <div class="home-container">
    <div>
      <el-row :gutter="20" style="border: 1px solid #bbb">
        <el-col
          :span="18"
        ><div class="grid-content bg-purple" />
          <el-row>
            <el-col :span="13" style="min-height: 170px" class="pd13">
              <div class="grid-content bg-purple" />
              <div class="box">
                <div class="header">
                  <div class="title">
                    工单统计
                    <span class="date">2022.10.01 ~ 2022.10.30</span>
                  </div>
                </div>
                <div class="body">
                  <div class="stats">
                    <div class="item">
                      <div class="num">714</div>
                      <div class="text">工单总数（个）</div>
                    </div>
                    <div class="item">
                      <div class="num">3</div>
                      <div class="text">完成工单（个）</div>
                    </div>
                    <div class="item">
                      <div class="num">0</div>
                      <div class="text">进行工单（个）</div>
                    </div>
                    <div class="item">
                      <div class="num">711</div>
                      <div class="text">取消工单（个）</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col
              :span="11"
              style="min-height: 170px"
              class="pd13"
            ><div class="grid-content bg-purple-light" />
              <div class="box bc2">
                <div class="header">
                  <div class="title">
                    销售统计
                    <span class="date">2022.10.01 ~ 2022.10.30</span>
                  </div>
                </div>
                <div class="body">
                  <div class="stats">
                    <div class="item">
                      <div class="num text-shadow color">14024</div>
                      <div class="text color">订单量（个）</div>
                    </div>
                    <div class="item">
                      <div class="num color">9.09</div>
                      <div class="text color">销售额（万元）</div>
                    </div>
                  </div>
                </div>
              </div></el-col>
          </el-row>
          <div class="sale-data" style="height: 352px; border: 1px solid #bbb">
            <div class="sale-data-header">
              <div class="title">
                销售数据
                <span class="date">2022.10.24 ~ 2022.10.30</span>
              </div>
              <div class="week-month-year">
                <div class="week item checked">周</div>
                <div class="month item">月</div>
                <div class="year item">年</div>
              </div>
            </div>
            <div>
              <Echarts />
            </div>
          </div>
        </el-col>
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" />
          商品热榜</el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col
          :span="14"
        ><div class="grid-content bg-purple" />
          合作商点位数Top5</el-col>
        <el-col
          :span="10"
        ><div class="grid-content bg-purple" />
          异常设备监控</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Echarts from './Echarts.vue'
import { dayjs } from '@/utils/dayjs'
import { getTaskReportInfoAPI, getCollectReportInfoAPI } from '@/api/user'
export default {
  name: 'Home',
  components: { Echarts },
  data() {
    return {
      start: dayjs('2022-10-01 00:00:00').format('YYYY-MM-DD HH:mm:ss'),
      end: dayjs('2022-10-30 23:59:59').format('YYYY-MM-DD HH:mm:ss')
      // taskReportInfo:
    }
  },
  computed: {
    ...mapGetters([
      // 'name'
    ])
  },
  created() {
    this.getTaskReportInfo()
    this.getCollectReportInfo()
  },
  methods: {
    async getTaskReportInfo() {
      const res = await getTaskReportInfoAPI(this.start, this.end)
      console.log('1111', res)
      console.log(res.data)
    },
    async getCollectReportInfo() {
      const res1 = await getCollectReportInfoAPI(this.start, this.end)
      console.log('2222', res1)
      console.log(res1.data)
    }
  }

}
</script>

<style lang="scss" scoped>
.home {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.sale-data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: pink;
  .title {
    height: 34px;
    align-items: center;
    line-height: 34px;
    // flex: 8;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    .date {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
  }
  .week-month-year {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
    .item {
      width: 37px;
      height: 25px;
      font-size: 14px;
      text-align: center;
      line-height: 25px;
      color: #9ca3b4;
      cursor: pointer;
    }
    .checked {
      background: #fff;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      border-radius: 7px;
      font-weight: 600;
      color: #333;
    }
  }
}
.el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #333;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  .svg-icon {
    width: 16px;
    height: 16px;
    color: inherit;
    fill: none;
    stroke: currentColor;
    vertical-align: middle;
    color: #333;
  }
}
.pd13 {
  padding: 0 10px;
}
.box {
  background: #e9f3ff;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  background-image: url(~@/assets/common/gongdan-bg.png),
    url(~@/assets/common/gongdan-bg2.png);
  display: flex;
  flex-direction: column;
  min-height: 166px;
  border-radius: 20px;
  padding: 20px;
  .header {
    display: flex;
    .title {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      flex: 1;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
      .date {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .body {
    display: flex;
    flex: 1;
    .stats {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-evenly;
      .item {
        display: inline-flex;
        flex-direction: column;
        .text-shadow {
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
          color: #ff5757 !important;
        }
        .color {
          color: #ff5757 !important;
        }
        .num {
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          color: #072074;
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
        }
        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px;
        }
      }
    }
  }
}
.bc2 {
  background: #fbefe8 url(~@/assets/common/sale-bg.png) no-repeat
    calc(100% - 12px) 100%;
}
</style>
